<!-- templates/parent_dashboard.html -->
{% extends "base.html" %}
{% block title %}家长视图{% endblock %}

{% block extra_css %}
<style>
    /* 修复进度环布局 */
    .progress-container {
        width: 150px;
        height: 150px;
        margin: 0 auto 2rem;
    }

    /* 修复评语显示 */
    .teacher-comment {
        background: rgba(78, 205, 196, 0.1);
        border-left: 3px solid #4ECDC4;
        padding: 1rem;
        margin: 1rem 0;
        border-radius: 0 8px 8px 0;
    }

    /* 修复代码块样式 */
    .submission-card pre {
        white-space: pre-wrap;
        word-break: break-word;
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 8px;
    }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="card shadow">
            <div class="card-body">
                <!-- 头部信息 -->
                <div class="text-center mb-5">
                    <div class="progress-container">
                        <svg viewBox="0 0 100 100" class="progress-ring">
                            <circle cx="50" cy="50" r="45" fill="none" 
                                    stroke="#eee" stroke-width="8"/>
                            <circle cx="50" cy="50" r="45" fill="none"
                                    stroke="#FF6B6B" stroke-width="8"
                                    stroke-linecap="round"
                                    id="progressCircle"/>
                            <text x="50" y="55" text-anchor="middle" 
                                  font-size="20" fill="#FF6B6B">
                                {{ '%0.1f'|format(avg_score) }}/10
                            </text>
                        </svg>
                    </div>
                    <h3>{{ student.username }}的学习进度</h3>
                    <p class="text-muted">{{ student.class_id }}班级</p>
                </div>

                <!-- 历史记录 -->
                <div class="mb-4">
                    <h4><i class="fas fa-history me-2"></i>提交记录</h4>
                    <div id="submissionList">
                        {% for item in student.histories|sort(attribute='timestamp', reverse=True) %}
                        <div class="submission-card card mb-3">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <span class="badge bg-primary me-2">
                                            {{ item.timestamp.strftime('%Y-%m-%d %H:%M') }}
                                        </span>
                                        <span class="badge bg-success">
                                            系统评分：{{ item.score }}/10
                                        </span>
                                    </div>
                                    <button class="btn btn-link p-0" 
                                            onclick="showFullCode('{{ item.id }}')">
                                        <i class="fas fa-expand"></i>
                                    </button>
                                </div>
                                
                                <pre>{{ item.code_content[:200] }}...</pre>

                                {% if item.teacher_rating %}
                                <div class="teacher-comment">
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="fas fa-chalkboard-teacher me-2"></i>
                                        <strong>教师评语：</strong>
                                        <span class="badge bg-warning ms-2">
                                            评分：{{ item.teacher_rating.rating }}/10
                                        </span>
                                    </div>
                                    <p class="mb-0">{{ item.teacher_rating.comment }}</p>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 修复进度环动画
function updateProgress(score) {
    const circle = document.getElementById('progressCircle');
    const radius = 45;
    const circumference = 2 * Math.PI * radius;
    const progress = score / 10;
    
    circle.style.strokeDasharray = `${circumference}`;
    circle.style.strokeDashoffset = circumference - (progress * circumference);
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    const initialScore = parseFloat("{{ student.avg_score|default(0) }}");
    updateProgress(initialScore);
});

// 修复代码查看功能
function showFullCode(submissionId) {
    fetch(`/api/submission/${submissionId}`)
        .then(response => response.json())
        .then(data => {
            const modalHtml = `
                <div class="modal fade" id="codeModal">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">完整代码</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <pre class="bg-dark text-light p-3 rounded">${data.code}</pre>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            const modalContainer = document.createElement('div');
            modalContainer.innerHTML = modalHtml;
            document.body.appendChild(modalContainer);
            
            new bootstrap.Modal(document.getElementById('codeModal')).show();
        });
}
</script>
{% endblock %}